<template>
    <div class="theme-goods-list">
        <div class="theme-goods-list-card">
            <div class="theme-goods-list-head">
                <Row :gutter="5">
                    <Col span="3">
                        <DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="录入时间筛选"></DatePicker>
                    </Col>
                    <Col span="3">
                        <DatePicker  clearable v-model="searchData.showTimeStartEnd" style="width: 100%" type="daterange" placeholder="展示时间筛选"></DatePicker>
                    </Col>
                    <Col span="3">
                        <Input clearable v-model="searchData.goodsName" placeholder="商品名称" type="text"></Input>
                    </Col>
                    <Col span="3">
                        <Select clearable v-model="searchData.type" placeholder="按主题分类" @on-change="changeSelect">
                            <Option v-for="(key,value) in type" :value="key.id">{{key.name}}</Option>
                        </Select>
                    </Col>
                    <Col span="3">
                        <Select clearable v-model="searchData.status" placeholder="是否显示">
                            <Option :value="-1">隐藏</Option>
                            <Option :value="1">显示</Option>
                        </Select>
                    </Col>
                    <Col span="3">
                        <Select clearable v-model="searchData.isTimeUp" placeholder="创建时间排序">
                            <Option :value="1">升序</Option>
                            <Option :value="2">降序</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <router-link :to="{name:'theme-goods-list-edit-nocache'}">
                            <Button class="subSearch" type="primary"><Icon type="plus-round"></Icon> 新增商品</Button>
                        </router-link>
                        <Button :loading="search_loading" @click="searchGetList" class="subSearch" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                    </Col>
                    <Col span="2">
                        <div class="paixuCon">
                            <div>
                                <a>排序</a>
                            </div>
                            <div>
                                <i-switch v-model="isswitch" size="large">
                                    <span slot="open">开启</span>
                                    <span slot="close">关闭</span>
                                </i-switch>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
            <DragableTable v-if="isDrage" v-model="data" :columns-list="columns" height="680" @on-end="handleOnend1"></DragableTable>
            <i-table v-else height="680" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
            </div>
        </Modal>
        <!--修改内容-->
        <Modal v-model="modal3" width="450">
            <p slot="header" style="text-align:center">
                <a><Icon type="information-circled"></Icon> 修改信息</a>
            </p>
            <Row :gutter="5" class="formList">
                <Col span="5">
                    <span class="lab">展示时间段:</span>
                </Col>
                <Col span="19">
                    <DatePicker :clearable="false"  v-model="changeInfo.changeTime" style="width: 100%" type="daterange" placeholder="录入时间筛选"></DatePicker>
                </Col>
            </Row>
            <Row :gutter="5" class="formList">
                <Col span="5">
                    <span class="lab">隐藏显示:</span>
                </Col>
                <Col span="19">
                    <Select v-model="changeInfo.status" placeholder="是否显示">
                        <Option :value="-1">隐藏</Option>
                        <Option :value="1">显示</Option>
                    </Select>
                </Col>
            </Row>
            <Row :gutter="5" class="formList">
                <Col span="5">
                    <span class="lab">排序号:</span>
                </Col>
                <Col span="19">
                    <InputNumber style="width: 100%" :min="0" v-model="changeInfo.sort"></InputNumber>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureChange">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import DragableTable from '../../../tables/components/dragableTable.vue';
    export default {
        name: "theme-goods-list",
        components: {
            DragableTable
        },
        data(){
            return{
                columns:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '商品名称',
                        key: 'goodsname',
                        align:"center",
                    },
                    {
                        title: '主题',
                        key: 'name',
                        align:"center",
                    },
                    {
                        title: '图标',
                        key: 'goodsimg',
                        align:"center",
                        render:(h,params)=>{
                            if(params.row.goodsimg==""){
                                return "暂无"
                            }else{
                                return h("div",{
                                    style:{
                                        cursor: "pointer",
                                    },
                                    on:{
                                        mouseover:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mousemove:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mouseout:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:"",
                                                x:"0px",
                                                y:"0px",
                                            })
                                        }
                                    }
                                },[
                                    h("img",
                                        {
                                            attrs:{
                                                src:params.row.goodsimg
                                            },
                                            style:{
                                                width:"42px",
                                                height:"42px",
                                                borderRadius:"4px",
                                                margin:"0px auto",
                                                display:"block",
                                            },
                                        })
                                ])
                            }
                        }
                    },
                    {
                        title: '是否显示',
                        key: 'status',
                        align:"center",
                        render:(h,params)=>{
                            return h("div",
                                [
                                    h("Icon",{
                                        props:{type: params.row.status==1?'eye':'eye-disabled'}
                                    }),
                                    h("span",params.row.status==1?' 显示':' 隐藏')
                                ]
                            )
                        }
                    },
                    {
                        title: '排序',
                        key: 'sort',
                        align:"center",
                    },
                    {
                        title: '展示时间段',
                        key: 'btime',
                        align:"center",
                        render:(h,params)=>{
                            return `${this.timeFormatOne(params.row.btime)} --- ${this.timeFormatOne(params.row.ltime)}`
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                    },
                                    on: {
                                        click: () => {
                                            this.tiao(params.index)
                                        }
                                    }
                                },"修改"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                modal2:false,
                modal3:false,//修改弹出
                doIndex:0,//操作的下标
                modal_loading:false,
                searchData:{
                    timeStartEnd:[],//两个时间内的赛选
                    showTimeStartEnd:[],//展示时间段
                    status:"",//是否展示
                    isTimeUp:"",//时间排序
                    type:"",//主题分类
                    goodsName:"",//商品名称
                },
                search_loading:false,
                type:[],//主题列表
                changeInfo:{
                    changeTime:[],//修改的时间
                    status:1,
                    sort:0,
                },
                isDrage:false,//是否允许拖拽
                isswitch:false,
            }
        },
        watch:{
            isswitch(val){
                if(val){
                    if(this.searchData.type==""){
                        this.$Message.warning("请先选择主题分类")
                        this.$nextTick(()=>{this.isswitch = false})
                    }else{
                        this.isDrage=true
                        this.columns.splice(8,1,
                            {
                                title: '拖拽',
                                key: 'drag',
                                width: 90,
                                align: 'center',
                                render: (h) => {
                                    return h(
                                        'Icon',
                                        {
                                            props: {
                                                type: 'arrow-move',
                                                size: 24
                                            }
                                        }
                                    );
                                }
                            })
                    }
                }else{
                    this.columns.splice(8,1)
                    this.isDrage=false
                }
            }
        },
        activated(){
            this.getGoodsBrand()
            this.getType()
        },
        methods:{
            //获取分类
            getType(){
                this.getJsonData("Zhuti/getAll", {
                    num: 300,
                    page: 1,
                }, true)
                    .then((res) => {
                        this.type = res.data
                    })
            },
            getGoodsBrand(){
                this.getJsonData("Zhuti/getAllZhutiGoods",{
                    num:this.page_con,
                    page:this.index,
                    begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",
                    btime:this.searchData.showTimeStartEnd[0]?this.searchData.showTimeStartEnd[0]/1000:"",
                    ltime:this.searchData.showTimeStartEnd[1]?this.searchData.showTimeStartEnd[1]/1000:"",
                    goodsName:this.searchData.goodsName,
                    status:this.searchData.status,
                    sort:this.searchData.isTimeUp,
                    zhutiId:this.searchData.type,
                },true)
                    .then((res)=>{
                        this.data=res.data
                        this.total=parseInt(res.count)
                        this.search_loading=false
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            changePage(n){
                this.index=n
                this.getGoodsBrand()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getGoodsBrand()
            },
            remove(n){
                this.doIndex=n
                this.modal2=true
            },
            del(){
                this.modal_loading = true;
                this.getJsonData("Zhuti/deleteZhutiGoods",{id:this.data[this.doIndex].id},true)
                    .then((res)=>{
                        this.getGoodsBrand()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('删除成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            searchGetList(){
                this.search_loading=true
                this.index=1
                this.getGoodsBrand()
            },
            tiao(n){
                this.doIndex = n
                this.changeInfo.changeTime.splice(0,1,new Date(this.data[n].btime * 1000))
                this.changeInfo.changeTime.splice(1,1,new Date(this.data[n].ltime * 1000))
                this.changeInfo.status = Number(this.data[n].status)
                this.changeInfo.sort = Number(this.data[n].sort)
                this.modal3 = true
            },
            sureChange(){
                if(this.changeInfo.sort !== null){
                    this.modal_loading = true;
                    this.getJsonData("Zhuti/changeZhutiGoods",
                        {
                            id:this.data[this.doIndex].id,
                            status:this.changeInfo.status,
                            btime:this.changeInfo.changeTime[0]/1000,
                            ltime:this.changeInfo.changeTime[1]/1000,
                            sort:this.changeInfo.sort,
                        },true)
                        .then((res)=>{
                            this.getGoodsBrand()
                            this.modal_loading = false;
                            this.modal3 = false;
                            this.$Message.success('修改成功');
                        }).catch((res)=>{
                        this.modal_loading = false;
                        this.modal3 = false;
                    })
                }else{
                    this.$Message.warning('请输入排序');
                }
            },
            //拖拽结果
            handleOnend1 () {
                let arryData = this.data.map((item,key,arr)=>{
                    return `${item.id}@${key}`
                }).join("-")
                this.getJsonData("Zhuti/changeSortKuai",{
                    str:arryData,
                },true)
                    .then((res) => {
                        this.getGoodsBrand()
                    }).catch(res=>{
                    this.getGoodsBrand()
                })
            },
            changeSelect(value){
                this.getGoodsBrand()
                if(value === "")this.isswitch = false
            }
        },
    }
</script>

<style lang="less">
    @import "theme-goods-list";
</style>